<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Poppins', sans-serif;
        }

        html,
        body {
            display: grid;
            height: 100%;
            place-items: center;
            text-align: center;
        }

        .container {
            height: 350px;
            width: 430px;
        }

        .container .wrapper {
            position: relative;
            height: 300px;
            width: 100%;
            border-radius: 10px;
            background: #fff;
            border: 2px dashed #c2cdda;
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
        }

        .wrapper.active {
            border: none;
        }

        .wrapper .image {
            position: absolute;
            height: 100%;
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .wrapper .image img {
            height: 100%;
            width: 100%;
            object-fit: cover;
        }

        .wrapper .icon {
            font-size: 100px;
            color: #9658fe;
        }

        .wrapper .text {
            font-size: 20px;
            font-weight: 500;
            color: #5b5b7b;
        }

        .wrapper #cancel-btn {
            position: absolute;
            right: 15px;
            top: 15px;
            font-size: 20px;
            cursor: pointer;
            color: #9658fe;
            display: none;
        }

        .wrapper.active:hover #cancel-btn {
            display: block;
        }

        .wrapper #cancel-btn:hover {
            color: #e74c3c;
        }

        .wrapper .file-name {
            position: absolute;
            bottom: 0px;
            width: 100%;
            color: #fff;
            padding: 8px 0;
            font-size: 18px;
            display: none;
            background: linear-gradient(135deg, #3a8ffe 0%, #9658fe 100%);
        }

        .wrapper.active:hover .file-name {
            display: block;
        }

        .container #custom-btn {
            margin-top: 30px;
            width: 100%;
            height: 50px;
            display: block;
            border: none;
            outline: none;
            border-radius: 25px;
            color: #fff;
            font-size: 18px;
            font-weight: 500;
            letter-spacing: 1px;
            text-transform: uppercase;
            cursor: pointer;
            background: linear-gradient(135deg, #3a8ffe 0%, #9658fe 100%);
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="wrapper">
            <div class="image">
                <img src=" " alt="">
            </div>
            <div class="content">
                <div class="icon"><i class="fa fa-caret-square-o-up"></i></div>
                <div class="text">No file chosen, yet!</div>
            </div>
            <div id="cancel-btn"><i class="fa fa-times"></i></div>
            <div class="file-name">File name here</div>
        </div>
        <input type="file" id="default-btn" hidden>
        <button onclick="defaultBtnActive()" id="custom-btn">Choose a file</button>
    </div>
</body>
<script>
    const wrapper = document.querySelector(".wrapper");
    const fileName = document.querySelector(".file-name");
    const cancelBtn = document.querySelector("#cancel-btn");
    const defaultBtn = document.querySelector("#default-btn");
    const customBtn = document.querySelector("#custom-btn");
    const img = document.querySelector("img");
    let regExp = /[0-9a-zA-Z\^\&\'\@\{\}\[\]\,\$\=\!\-\#\(\)\.\%\+\~\_]+$/;
    function defaultBtnActive() {
        defaultBtn.click();
    }
    defaultBtn.addEventListener("change", function () {
        const file = this.files[0];
        if (file) {
            const reader = new FileReader();
            reader.onload = function () {
                const result = reader.result;
                img.src = result;
                wrapper.classList.add("active");
            }
            cancelBtn.addEventListener("click", function () {
                img.src = " ";
                wrapper.classList.remove("active");
            })
            reader.readAsDataURL(file);
        }
        if (this.value) {
            let valueStore = this.value.match(regExp);
            fileName.textContent = valueStore;
        }
    });
</script>

</html>